<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="teacher.name" />
            </el-form-item>
            <el-form-item label="讲师排序">
                <el-input-number v-model="teacher.sort" controls-position="right" min="0" />
            </el-form-item>
            <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="请选择">
                    <!--
              数据类型一定要和取出的json中的一致，否则没法回填
              因此，这里value使用动态绑定的值，保证其数据类型是number
            -->
                    <el-option :value="1" label="高级讲师" />
                    <el-option :value="2" label="首席讲师" />
                </el-select>
            </el-form-item>
            <el-form-item label="讲师资历">
                <el-input v-model="teacher.career" />
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea" />
            </el-form-item>

            <!-- 讲师头像：TODO -->
            <!-- 讲师头像 -->
            <el-form-item label="讲师头像">

                <!-- 头衔缩略图 -->
                <pan-thumb :image="teacher.avatar" />
                <!-- 文件上传按钮 -->
                <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
                </el-button>

                <!--
                v -show：是否显示上传组件
                :key：类似于id，如果一个页面多个图片上传控件，可以做区分
                :url：后台上传的url地址
                @close：关闭上传组件
                @crop-upload-success：上传成功后的回调 -->
                <image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey"
                    :url="BASE_API+'/eduoss/fileoss'" field="file" @close="close" @crop-upload-success="cropSuccess" />

            </el-form-item>


            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

import teacher from '@/api/edu/teacher'
import { re } from 'semver';
// 引入图片上传所需要的组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    // 给组件进行声明
    components: { ImageCropper, PanThumb },
    data() {
        return {
            teacher: {
                name: '',
                sort: 0,
                level: 1,
                career: '',
                intro: '',
                avatar: ''
            },
            imagecropperShow: false,   //上传图片的弹框是否显示
            imagecropperKey: 0,//上传组件key值
            BASE_API: process.env.BASE_API,//获取dev.env.js里面的端口号
            saveBtnDisabled: false // 保存按钮是否禁用,
        }
    },

    created() {
        this.init();
    },
    // 路由发生变化，就会执行这个方法
    watch: {
        // 监听
        $route(to, from) {   //路由变化的方式，路由发生变化，这个方法就会执行
            console.log('watch $route')
            this.init()
        }
    },
    methods: {
        init() {
            // 页面渲染之前执行，判断路径是否有id值
            if (this.$route.params && this.$route.params.id) {
                // this.$router.params用于获取路由地址
                const id = this.$route.params.id;
                // 调用根据id查询的方法
                this.getInfo(id);
            } else {
                // 如果没有id，就进行清空
                this.teacher = {};
            }
        },

        saveOrUpdate() {
            // 开启保存按钮
            this.saveBtnDisabled = true;
            // 判断是执行修改方法还是添加方法
            // 根据id值进行判断，如果有id值就是修改，如果没有id值就是添加
            if (this.teacher.id) {
                this.updateTeacher();
            } else {
                this.saveData();
            }
        },

        // 点击保存按钮，修改讲师的方法
        updateTeacher() {
            teacher.updateTeacherInfo(this.teacher)
                .then(response => {
                    return this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                }).then(response => {
                    // 这里实现的是路由切换
                    this.$router.push({ path: '/teacher/table' });
                })
        },

        // 保存
        saveData() {
            teacher.save(this.teacher).then(response => {
                return this.$message({
                    type: 'success',
                    message: '保存成功!'
                })
            }).then(resposne => {
                // 这里实现的是路由切换
                this.$router.push({ path: '/teacher/table' })
            }).catch((response) => {
                // console.log(response)
                this.$message({
                    type: 'error',
                    message: '保存失败'
                })
            })
        },
        // 根据讲师id查询方法
        // 因为这里添加和修改都是使用的同一个页面
        // 所以在调用这个方法之前需要进行判断
        // 判断路径里面是否有讲师的id值，如果有id值修改，如果没有id值，就进行添加操作
        getInfo(id) {
            teacher.getTeacherInfo(id)
                .then(response => {
                    this.teacher = response.data.teacher;
                })
        },
        // 根据id更新老师信息
        // 根据id更新记录
        updateData() {
            // 启动保存按钮
            this.saveBtnDisabled = true
            teacher.updateById(this.teacher).then(response => {
                return this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
            }).then(resposne => {
                this.$router.push({ path: '/teacher/table' })
            }).catch((response) => {
                // console.log(response)
                this.$message({
                    type: 'error',
                    message: '保存失败'
                })
            })
        },
        // 图片上传成功之后，执行的回调函数
        cropSuccess(data) {
            // 上传成功之后，后端接口返回的是图片地址
            this.teacher.avatar = data.url;
            // 关闭弹窗
            this.imagecropperShow = false;
            this.imagecropperKey = this.imagecropperKey + 1;
        },
        // 关闭上传图片的组件执行的方法
        close() {
            this.imagecropperShow = false;
            // 上传组件初始化
            this.imagecropperKey = this.imagecropperKey + 1;
        },
    }
}
</script>